<script>
export default {
  name: "login",
    data() {
        return {
            currentTime: ''
        };
    },
    methods: {
        updateTime() {
            const now = new Date();
            this.currentTime = now.toLocaleTimeString();
        }
    },
    mounted() {
        this.updateTime();
        this.timer = setInterval(this.updateTime, 1000);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    }

}

</script>

<template>
    <div class="background">
        <div class="clock">
            {{ currentTime }}
        </div>
        <el-calendar>
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template
                slot="dateCell"
                slot-scope="{date, data}">
                <p :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
                </p>
            </template>
        </el-calendar>
    </div>

</template>

<style scoped>
.background {
    background-image: url('../../assets/img.png'); /* 设置背景图片 */
    background-size: cover; /* 确保图片覆盖整个div */
    background-repeat: no-repeat; /* 防止图片重复 */
    background-position: center center; /* 图片居中 */
    width: 100vw; /* 全视口宽度 */
    height: 100vh; /* 全视口高度 */
}
.clock {
    font-size: 3em; /* 字体大小 */
    color: white; /* 字体颜色 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    padding: 10px 20px;
    border-radius: 10px;
    width: 200px;
}
.background.is-selected {
    color: #1989FA;
}
</style>